<template>
<div class="app-container">
  <!--工具栏-->
  <div class="head-container">
    <div v-if="crud.props.searchToggle">
      <!-- 搜索 -->
      <el-input
        v-model="query.name"
        clearable
        placeholder="输入姓名"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="crud.toQuery"
      />

      <!--下拉选择-->
<!--
      <el-select v-model="query.type" clearable placeholder="类型" class="filter-item" style="width: 130px">
        <el-option v-for="item in queryTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
      </el-select>-->


      <!--时间区间-->

      <el-date-picker
        v-model="query.createTime"
        :default-time="['00:00:00','23:59:59']"
        type="daterange"
        range-separator=":"
        size="small"
        class="date-item"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="createTimeStart"
        end-placeholder="createTimeEnd"
      />
      <rrOperation/>
    </div>

    <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
    <crudOperation :permission="permission"/>
    <!--表单组件-->
    <el-dialog :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="500px">
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
        <!--<el-form-item label="id" prop="id">
          <el-input v-model="form.id" style="width: 370px;"/>
        </el-form-item>-->
        <el-form-item label="名字">
          <el-input v-model="form.name" style="width: 370px;"/>
        </el-form-item>
        <el-form-item label="创建时间">
         <el-input v-model="form.createTime" style="width: 370px;"/>



         <!-- <el-date-picker
            v-model="form.createTime"
            type="datetime"
            format="yyyy-MM-ddHH:mm:ss"
            value-format="yyyy-MM-ddHH:mm:ss"
            placeholder="选择日期"
          >
          </el-date-picker>-->
        </el-form-item>
        <el-form-item label="isDelete">
          <el-input v-model="form.isDelete" style="width: 370px;"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      size="small"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="id" label="id"/>
        <el-table-column prop="name" label="name"/>
        <el-table-column prop="createTime" label="createTime">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="isDelete" label="isDelete"/>
        <el-table-column v-permission="['admin','testLi:edit','testLi:del']" label="操作" width="150px" align="center">
          <template slot-scope="scope">
            <udOperation :data="scope.row" :permission="permission" />
          </template>
        </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination/>
  </div>
</div>
</template>

<script>
  import crudTestLi from '@/api/testLi'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  // 分页 组件
  import pagination from '@crud/Pagination'
  //--------------------
  // crud交由presenter持有
  //定义请求数据，
/*  const defaultCrud = CRUD({
    title: 'testLi:list',
    url: 'api/testLi',
    method: 'post',
    sort: 'id',
    crudMethod: { ...crudTest }
  })*/
  const defaultForm = {
  id:
  null,
name:
  null,
createTime:
  null,
isDelete:
  null  }
  export default {
    name: 'TestLi',
    components: {pagination, crudOperation, rrOperation, udOperation},
    mixins: [presenter(), header(), form(defaultForm), crud()],
    cruds() {
      console.log("111!");
      return CRUD({ title: 'testLiBo', url: 'api/testLi', sort: 'id,desc', crudMethod: { ...crudTestLi }})
    },
    data() {
      console.log("11111111");
      return {
        permission: {
          add: ['admin', 'testLi:add'],
          edit: ['admin', 'testLi:edit'],
          del: ['admin', 'testLi:del']
        },
        rules: {
      id:
      [
        {required: true, message: '不能为空！', trigger: 'blur'}
      ],
      name:
        [
          {required: true, message: '名字不能为空', trigger: 'blur'}
        ]

        },queryTypeOptions: [
          {
            key: 'id',
            display_name: 'id'
          },
          {
            key: 'name',
            display_name: '姓名'
          }
        ]
      }
    },
    methods: {
      // 获取数据前设置好接口地址
      [CRUD.HOOK.beforeRefresh]() {
        return true
      }
    }
  }
</script>
<style scoped>
</style>
